<template>
    <div class="fmainBox">
        <div class="ncweacher">
            <farm-weacher @change="getItem"/>
        </div>
        <div class="tqyb">
            <template v-if="framStore.weacherFarmItem.weatherFarmId">
                <div class="wtitle"> <span>今日天气</span></div>
                <today-weather/>

                <div class="wtitle"> 
                    <span>积雨/积温分析</span>
                    <!-- <div class="rqtop">
                        <el-date-picker class="my-small-date" v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"/>
                    </div> -->
                </div>
                <rain-analysis/>

                <div class="wtitle"> <span>24小时天气</span></div>
                <one-day-weather/>

                <div class="wtitle" style="margin-top: 10px;"> <span>15天预报</span></div>
                <fifteen-day-weacher/>
            </template>
            <template v-else>
                <div style="text-align: center;padding:50px 0; font-size:14px">暂无数据</div>
            </template>
        </div>
    </div>
  </template>
  
  <script setup name="courseList">
  // 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
  
  import { nextTick, ref, watch, onActivated,reactive,onMounted} from 'vue'
  import {getCouseList} from '@/api/user'

  import { useUserStore } from '@/pinia/modules/user'
  import { useFramStore } from '@/pinia/modules/farm'
  import {message} from '@/utils/element'
  import farmWeacher from './components/farmWeacher.vue'
  import todayWeather from './components/todayWeather.vue'
  import rainAnalysis from './components/rainAnalysis.vue'
  import oneDayWeather from './components/oneDayWeather.vue'
  import fifteenDayWeacher from './components/fifteenDayWeacher.vue'
  
  const userStore = useUserStore()
  const framStore = useFramStore()
  
  const mapRef = ref(null)
  const time = ref('')

  
  onMounted(async ()=>{
    
  
  })
  const getItem = (item)=>{
    if(item){
        framStore.set_weacherFarmItem(item)
    }else{
        framStore.set_weacherFarmItem({}) // 设为空
    } 
  }
  
  
  </script>
  
  <style lang="scss" scoped>
    .fmainBox{
        display: flex;
        box-sizing: border-box;
        //border: 1px solid red;
        min-width: 1200px;
        .wtitle{
            box-sizing: border-box;
            display: flex;
            height: 30px;
            align-items: center;
            span{
                display: flex;
                align-items: center;
                font-size: 12px;
                flex: 1;
                font-weight: bold;
                &::before{
                    content: "";
                    display: block;
                    width: 3px;
                    background: #48b27a;
                    height: 14px;
                    margin: 0 3px 0 0;
                }
            }
        }
        .ncweacher{
            box-sizing: border-box;
            width: 350px;
            background-color: #fff;
            padding: 10px;
            flex-shrink: 0;
        }
        .tqyb{
            flex: 1;
            box-sizing: border-box;
            background-color: #fff;
            margin: 0 0 0 10px;
            padding: 10px;
            width: calc(100vw - 388px);;
        }
    }
  </style>
  <style lang="scss">
    .rqtop{
        .el-date-editor{
            width: 330px!important;
        }
    }
  </style>
  